<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus'
import { Search, UsersRound, ShieldCheck } from '@vben/icons';
import { getGroupOrgCertTreeApi } from '#/api/system/orgMgr';
import { trimStringParams } from '#/utils/trimStringParams';

defineOptions({ name: 'OrgList' });

interface Tree {
  [key: string]: any
}

const emit = defineEmits(['queryStuData']);
const defaultProps = {
  children: 'children',
  label: 'name',
}
const filterOrg = ref<any>(null)
const treeRef = ref<TreeInstance>()
const treeLoading = ref(false)
const treeData = ref()
const currentTreeId = ref()

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
  const str = trimStringParams(value)
  if (!str) return true
  return data.name.includes(str)
}

const getTreeData = () => {
  const params = {
    status: 'enable',
    curPage: 1
  } as any;
  treeLoading.value = true
  getGroupOrgCertTreeApi(params)
    .then((res) => {
      const { data } = res;
      treeData.value = data;
      if (data?.length > 0) currentTreeId.value = data[0]?.id ?? null
    })
    .finally(() => {
      treeLoading.value = false;
    });
};

const fileTree = () => {
  console.log(filterOrg.value)
  if (!!filterOrg.value) {
    treeRef.value?.filter(filterOrg.value)
  } else {
    treeRef.value?.filter(null)
  }
}

const checkChange = (data: any, node: any) => {
  console.log(data)
  console.log(node)
  currentTreeId.value = data?.id
}

onMounted(() => {
  getTreeData()
})

watch(
  () => currentTreeId.value,
  (value) => {
    if (value) emit('queryStuData', value)
  },
  {
    immediate: true,
  },
);

</script>
<template>
  <section class="flex flex-col w-full h-full overflow-hidden">
    <div class="text-[16px] leading-[24px] text-[#191919] mb-[10px] font-500">{{ $t('common.groupTxt') }}</div>
    <el-input v-model="filterOrg" @change="fileTree" class="w-[100%] mb-[10px]"
      :placeholder="$t('common.inputPhTxt', [$t('common.keywordsTxt')])">
      <template #suffix>
        <Search class="size-5 cursor-pointer" @click="fileTree"></Search>
      </template>
    </el-input>
    <el-tree ref="treeRef" :current-node-key="currentTreeId" class="w-full flex-1 overflow-auto filter-tree"
      :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all :indent="5"
      :filter-node-method="filterNode" @current-change="checkChange">
      <template #default="{ data }">
        <div style="width: 100%;" class="grid grid-cols-[1fr_auto] items-center">
          <div class="flex items-center min-w-0 ">
            <div class="flex-1 min-w-0 text-[14px] truncate" :title="data.name">{{ data.name }}</div>
          </div>
          <el-tooltip effect="dark" :content="data.certifiedName" placement="top">
            <ShieldCheck class="grid-cols-1 flex-shrink-0 w-[16px] h-[16px] ml-[8px] mr-[8px]" />
          </el-tooltip>
        </div>
      </template>
    </el-tree>
  </section>
</template>
<style lang="scss" scoped>
:deep(.el-tree-node__content) {
  height: 32px;
  border-radius: 4px;
  line-height: 32px;
  margin-bottom: 8px;
  color: #191919;
}
:deep(.is-current>.el-tree-node__content) {
  background-color: #CCE1F6;
  border-radius: 4px;
  font-weight: 500;
  color: #0067D1;
}
</style>
